<template>
	<uni-swiper-dot :info="cardList" :current="currentIndex" field="content" mode="round" :dotsStyles="dotsStyles">
		<swiper class="swiper-group" :autoplay="autoplay" @change="swiperChange">
			<swiper-item key="0" style="display: flex;flex-direction: column;">
				<view style="display: flex;flex: 1;margin-top: 10rpx;">

					<view v-for="(item,index) in items" :key="index" v-if="index<3" class="swiper-item-group"
						@click="setHide(item)">
						<text class="swiper-item-title" :style="'color:'+titleColor">{{item.name}}</text>
						<view v-if="!item.hide" style="display: flex;margin-top: 16rpx;">
							<text v-if="!item.notMoney" class="swiper-item-unit" :style="'color:'+textColor">¥</text>
							<text class="swiper-item-txt" :style="'color:'+textColor">{{statInfo[item.field]}}</text>
						</view>
						<view v-else style="display: flex;margin-top: 16rpx;">
							<!-- <text class="swiper-item-unit" :style="'color:'+textColor">¥</text> -->
							<text class="swiper-item-txt" :style="'color:'+textColor">****</text>
						</view>
					</view>



					<!-- 	<view class="swiper-item-group" @click="setHide(0)">
						<text class="swiper-item-title" :style="'color:'+titleColor">销售总额</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-unit" :style="'color:'+textColor">¥</text>
							<text class="swiper-item-txt" :style="'color:'+textColor">{{statInfo.totalPayAmount}}</text>
						</view>
					</view>
					<view class="swiper-item-group" @click="setHide(1)">
						<text class="swiper-item-title" :style="'color:'+titleColor">订单总数</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-txt" :style="'color:'+textColor">{{statInfo.orderCount}}</text>
						</view>
					</view>
					<view class="swiper-item-group" @click="setHide(2)">
						<text class="swiper-item-title" :style="'color:'+titleColor">佣金总额</text>
						<view v-if="!hideOptions[2]" style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-unit" :style="'color:'+textColor">¥</text>
							<text class="swiper-item-txt"
								:style="'color:'+textColor">{{statInfo.estimatedCommission}}</text>
						</view>
						<view v-else style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-txt" :style="'color:'+textColor">****</text>
						</view>
					</view> -->
				</view>
				<view style="display: flex;flex: 1;margin-bottom: 30rpx;">
				<view v-for="(item,index) in items" :key="index" v-if="index>2&&index<6" class="swiper-item-group"
					@click="setHide(item)">
					<text class="swiper-item-title" :style="'color:'+titleColor">{{item.name}}</text>
					<view v-if="!item.hide" style="display: flex;margin-top: 16rpx;">
						<text v-if="!item.notMoney" class="swiper-item-unit" :style="'color:'+textColor">¥</text>
						<text class="swiper-item-txt" :style="'color:'+textColor">{{statInfo[item.field]}}</text>
					</view>
					<view v-else style="display: flex;margin-top: 16rpx;">
						<!-- <text class="swiper-item-unit" :style="'color:'+textColor">¥</text> -->
						<text class="swiper-item-txt" :style="'color:'+textColor">****</text>
					</view>
				</view>
				</view>
			</swiper-item>
			<swiper-item key="1" style="display: flex;flex-direction: column;">
				<view style="display: flex;flex: 1;margin-top: 10rpx;">
					<view class="swiper-item-group">
						<text class="swiper-item-title" :style="'color:'+titleColor">退款金额</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-unit" :style="'color:'+textColor">¥</text>
							<text class="swiper-item-txt"
								:style="'color:'+textColor">{{statInfo.refundPayAmount}}</text>
						</view>
					</view>
					<view class="swiper-item-group">
						<text class="swiper-item-title" :style="'color:'+titleColor">退款订单总数</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-txt"
								:style="'color:'+textColor">{{statInfo.refundOrderCount}}</text>
						</view>
					</view>
					<view class="swiper-item-group">
						<text class="swiper-item-title" :style="'color:'+titleColor">退款佣金</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-unit" :style="'color:'+textColor">¥</text>
							<text class="swiper-item-txt"
								:style="'color:'+textColor">{{statInfo.refundEstimatedCommission}}</text>
						</view>
					</view>
				</view>
				<view style="display: flex;flex: 1;margin-bottom: 30rpx;">
					<view class="swiper-item-group">
						<text class="swiper-item-title" :style="'color:'+titleColor">退款率</text>
						<view style="display: flex;margin-top: 16rpx;">
							<text class="swiper-item-txt" :style="'color:'+textColor">{{statInfo.refundRatio}}%</text>
						</view>
					</view>
					<view class="swiper-item-group"></view>
					<view class="swiper-item-group"></view>
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>
</template>

<script>
	import uniSwiperDot from '../uni-swiper-dot/uni-swiper-dot.vue';
	export default {
		components: {
			uniSwiperDot
		},
		props: {
			statInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			textColor: {
				type: String,
				default () {
					return '#fff'
				}
			},
			titleColor: {
				type: String,
				default () {
					return '#fff'
				}
			},
		},
		data() {
			return {
				items: [{
						name: '销售总额',
						field: 'totalPayAmount',
						hide: false
					}, {
						name: '订单总数',
						field: 'orderCount',
						notMoney:true,
						hide: false
					}, {
						name: '佣金总额',
						field: 'estimatedCommission',
						hide: false
					},
					{
						name: '有效销售额',
						field: 'validPayAmount',
						hide: false
					},
					{
						name: '有效订单数',
						field: 'validOrderCount',
						hide: false,
						notMoney:true
					},
					{
						name: '有效佣金',
						field: 'validEstimatedCommission',
						hide: false
					},
					{
						name: '退款金额',
						field: 'refundPayAmount',
						hide: false
					},
					{
						name: '退款订单总数',
						field: 'refundOrderCount',
						hide: false
					},
					{
						name: '退款佣金',
						field: 'refundEstimatedCommission',
						hide: false
					},
					{
						name: '退款率',
						field: 'refundRatio',
						hide: false
					}
				],
				hideOptions: [false, false, false],
				currentIndex: 0,
				autoplay: false,
				cardList: [{}, {}],
				dotsStyles: {
					backgroundColor: '#CCCCCC',
					border: '1rpx solid #CCCCCC',
					color: '#fff',
					width: 3,
					height: 3,
					bottom: 8,
					spacing: 2,
					selectWidth: 16,
					selectedBackgroundColor: '#C2CF51',
					selectedBorder: '1rpx solid #C2CF51'
				},
			}
		},
		methods: {
			setHide(item) {
				item.hide = !item.hide
				// this.hideOptions[index] = !this.hideOptions[index]
				// this.$set(this.hideOptions, index, !this.hideOptions[index])
				console.log('---' + this.hideOptions[index])
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current;
			},
		}
	}
</script>

<style>
	.swiper-group {
		width: 100%;
		height: 310rpx;
	}

	.swiper-item-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.swiper-item-title {
		font-size: 24rpx;
		font-family: MiSans-Regular, MiSans;
		font-weight: 400;
		/* color: #666666; */
		/* color: white; */
		line-height: 32rpx;
	}

	.swiper-item-unit {
		font-size: 24rpx;
		font-family: MiSans-Medium, MiSans;
		font-weight: 500;
		/* color: #333333; */
		/* color: white; */
		line-height: 44rpx;
	}

	.swiper-item-txt {
		font-size: 32rpx;
		font-family: MiSans-Medium, MiSans;
		font-weight: 500;
		/* color: #333333; */
		/* color: white; */
		line-height: 44rpx;
		margin-left: 2rpx;
	}
</style>